<template>
  <div class="app-container">

    <u-page title="优惠券配置">
      <div slot="header">
        <el-button type="primary" @click="updateData">保存</el-button>
      </div>

      <el-form ref="dialogForm" :model="dataForm" :rules="rules" label-width="100px">

        <el-tabs type="border-card">

          <el-tab-pane label="红宝石权益">
            <el-card shadow="never" class="panel">
              <div class="panel-body">
                <div class="panel-header">
                  <h4>红宝石权益</h4>
                  <span>开启后在平台中可以调起接口进行发劵</span>
                </div>
                <div>
                  <el-switch v-model="dataForm.ruby_switch" class="panel-switch" />
                </div>
              </div>

              <div v-if="dataForm.ruby_switch" style="margin-top: 20px;">

                <el-form-item label="1月优惠券" prop="ruby_templateId_1">
                  <ues-coupon v-model="dataForm.ruby_templateId_1" valid></ues-coupon>
                </el-form-item>

                <el-form-item label="2月优惠券" prop="ruby_templateId_2">
                  <ues-coupon v-model="dataForm.ruby_templateId_2" valid></ues-coupon>
                </el-form-item>

                <el-form-item label="3月优惠券" prop="ruby_templateId_3">
                  <ues-coupon v-model="dataForm.ruby_templateId_3" valid></ues-coupon>
                </el-form-item>

                <el-form-item label="4月优惠券" prop="ruby_templateId_4">
                  <ues-coupon v-model="dataForm.ruby_templateId_4" valid></ues-coupon>
                </el-form-item>

                <el-form-item label="5月优惠券" prop="ruby_templateId_5">
                  <ues-coupon v-model="dataForm.ruby_templateId_5" valid></ues-coupon>
                </el-form-item>

                <el-form-item label="6月优惠券" prop="ruby_templateId_6">
                  <ues-coupon v-model="dataForm.ruby_templateId_6" valid></ues-coupon>
                </el-form-item>

                <el-form-item label="7月优惠券" prop="ruby_templateId_7">
                  <ues-coupon v-model="dataForm.ruby_templateId_7" valid></ues-coupon>
                </el-form-item>

                <el-form-item label="8月优惠券" prop="ruby_templateId_8">
                  <ues-coupon v-model="dataForm.ruby_templateId_8" valid></ues-coupon>
                </el-form-item>

                <el-form-item label="9月优惠券" prop="ruby_templateId_9">
                  <ues-coupon v-model="dataForm.ruby_templateId_9" valid></ues-coupon>
                </el-form-item>

                <el-form-item label="10月优惠券" prop="ruby_templateId_10">
                  <ues-coupon v-model="dataForm.ruby_templateId_10" valid></ues-coupon>
                </el-form-item>

                <el-form-item label="11月优惠券" prop="ruby_templateId_11">
                  <ues-coupon v-model="dataForm.ruby_templateId_11" valid></ues-coupon>
                </el-form-item>

                <el-form-item label="12月优惠券" prop="ruby_templateId_12">
                  <ues-coupon v-model="dataForm.ruby_templateId_12" valid></ues-coupon>
                </el-form-item>

              </div>
            </el-card>
          </el-tab-pane>

          <el-tab-pane label="钻石权益">
            <el-card shadow="never" class="panel">
              <div class="panel-body">
                <div class="panel-header">
                  <h4>钻石权益</h4>
                  <span>开启后在平台中可以调起接口进行发劵</span>
                </div>
                <div>
                  <el-switch v-model="dataForm.diamond_switch" class="panel-switch" />
                </div>
              </div>

              <div v-if="dataForm.diamond_switch" style="margin-top: 20px;">

                <el-form-item label="1月优惠券" prop="ruby_templateId_1">
                  <ues-coupon v-model="dataForm.diamond_templateId_1" valid></ues-coupon>
                </el-form-item>

                <el-form-item label="2月优惠券" prop="ruby_templateId_2">
                  <ues-coupon v-model="dataForm.diamond_templateId_2" valid></ues-coupon>
                </el-form-item>

                <el-form-item label="3月优惠券" prop="ruby_templateId_3">
                  <ues-coupon v-model="dataForm.diamond_templateId_3" valid></ues-coupon>
                </el-form-item>

                <el-form-item label="4月优惠券" prop="ruby_templateId_4">
                  <ues-coupon v-model="dataForm.diamond_templateId_4" valid></ues-coupon>
                </el-form-item>

                <el-form-item label="5月优惠券" prop="ruby_templateId_5">
                  <ues-coupon v-model="dataForm.diamond_templateId_5" valid></ues-coupon>
                </el-form-item>

                <el-form-item label="6月优惠券" prop="ruby_templateId_6">
                  <ues-coupon v-model="dataForm.diamond_templateId_6" valid></ues-coupon>
                </el-form-item>

                <el-form-item label="7月优惠券" prop="ruby_templateId_7">
                  <ues-coupon v-model="dataForm.diamond_templateId_7" valid></ues-coupon>
                </el-form-item>

                <el-form-item label="8月优惠券" prop="ruby_templateId_8">
                  <ues-coupon v-model="dataForm.diamond_templateId_8" valid></ues-coupon>
                </el-form-item>

                <el-form-item label="9月优惠券" prop="ruby_templateId_9">
                  <ues-coupon v-model="dataForm.diamond_templateId_9" valid></ues-coupon>
                </el-form-item>

                <el-form-item label="10月优惠券" prop="ruby_templateId_10">
                  <ues-coupon v-model="dataForm.diamond_templateId_10" valid></ues-coupon>
                </el-form-item>

                <el-form-item label="11月优惠券" prop="ruby_templateId_11">
                  <ues-coupon v-model="dataForm.diamond_templateId_11" valid></ues-coupon>
                </el-form-item>

                <el-form-item label="12月优惠券" prop="ruby_templateId_12">
                  <ues-coupon v-model="dataForm.diamond_templateId_12" valid></ues-coupon>
                </el-form-item>

              </div>
            </el-card>
          </el-tab-pane>
        </el-tabs>

      </el-form>

    </u-page>
  </div>
</template>
<script>

import uesCoupon from '@/components/coupon/uesCoupon'
export default {
  components: {
    uesCoupon
  },
  data() {
    return {
      api: this.$u.api.MarketCouponConfig,
      dataForm: {},
      value: false,
      rules: {
        templateId: [
          { required: true, message: '请选择优惠券', trigger: ['blur'] }
        ]
      }
    }
  },
  created() {
    this.getLoad()
  },
  methods: {
    // 初始化数据
    getLoad() {
      this.api.fetch().then(res => {
        this.dataForm = res.data
      })
    },
    // 提交编辑数据
    updateData() {
      this.$refs['dialogForm'].validate((valid) => {
        if (valid) {
          this.api.update(this.dataForm).then(() => {
            this.getLoad()
            this.$u.msg('保存成功')
          })
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>

  .panel{
    margin-bottom: 20px;
    .panel-body{
      display:flex;
      justify-content:space-between;

      .panel-header{
        display: flex;
        flex-flow: column;
        color: #999;
        font-size: 12px;

        h4{
          font-size: 14px;
          color: #000;
        }
      }

      .panel-switch{
        margin-top: 20px;
      }
    }
  }

</style>
